<template>
	<view class="register" :style="{height: wh + 'px'}">
		<!-- 上方的标题 -->
		<view class="title">
			<view style="font-size: 40px; color: aquamarine; padding: 0 20px;">用户注册</view>
		</view>
		<!-- 下方的表单 -->
		<view class="content">
			<uni-forms ref="regForm" :model="regFormData" :rules="regRules" validateTrigger="blur">
				<uni-forms-item name="username">
					<uni-easyinput v-model="regFormData.username" prefix-icon="person" placeholder="请输入用户名" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<uni-easyinput type="password" v-model="regFormData.password" prefix-icon="locked"
						placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item name="mobilePhoneNumber">
					<uni-easyinput v-model="regFormData.mobilePhoneNumber" prefix-icon="mail" type="mobilePhoneNumber" placeholder="请输入手机号" />
				</uni-forms-item>
			</uni-forms>
			<button class="button" type="primary" @click="register()">注册</button>
		</view>
		<!-- 下方的跳转登录 -->
		<view class="login-link">
			<navigator url="/pages/login/login">已有账号，点击登录</navigator>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		userStore
	} from '/store/userStrore.js';
	import {
		CONFIG
	} from "../../utils/config";

	const store = userStore();

	const regFormData = ref({
		username: '',
		password: '',
		mobilePhoneNumber: ''
	});

	const regRules = ref({
		username: {
			rules: [{
					required: true,
					errorMessage: '请输入用户名'
				},
				{
					minLength: 3,
					maxLength: 10,
					errorMessage: '用户名必须在3到10个字符之间'
				},
				{
					pattern: '^\\w{3,10}$',
					errorMessage: '请输入3-10位数字字母和下划线作为用户名'
				}
			]
		},
		password: {
			rules: [{
					required: true,
					errorMessage: '请输入密码'
				},
				{
					pattern: '123456@',
					errorMessage: '密码必须是6-20位数字字母和特殊字符的组合'
				}
			]
		},
		mobilePhoneNumber: {
			rules: [{
					required: true,
					errorMessage: '请输入手机号'
				},
				{
					type: 'mobilePhoneNumber',
					errorMessage: '请输入有效的手机号'
				}
			]
		}
	});
					
		const wh = ref(0);
		   uni.getSystemInfo({
				success: (res) => {
				wh.value = res.windowHeight;
		}
	});
					
		const regForm = ref(null);
					
			function register() {
			regForm.value.validate().then(valid => {
			if (valid) {
			uni.$post(`${CONFIG.leanCloud_url}/1.1/users`, regFormData.value).then(response => {
			if (response.statusCode === 201) { // 假设服务器在成功注册时返回201状态码
			uni.showToast({
				  title: '注册成功',
				  icon: 'success'
		});
			// 可以选择自动登录或跳转到其他页面
			// store.addUserInfo(...); // 如果需要，可以在这里添加用户信息到store
											// uni.navigateTo({ url: '/pages/home/home' });
	} else {
			// 处理注册失败的情况
			if (response.data && response.data.code) {
				uni.showToast({
				title: response.data.error || '注册失败',
				icon: 'none'
		});
	} else {
				uni.showToast({
					title: '服务器错误',
					icon: 'none'
			});
		}
	}
}).catch(error => {
				console.error('注册请求失败:', error);
				uni.showToast({
				title: '网络错误',
				icon: 'none'
			});
		});
	}
}).catch(error => {
				console.error('表单验证失败:', error);
			});
		}
</script>
					
<style lang="scss">
	.register {
		
		display: flex;
		flex-direction: column;
	    align-items: center;
	    justify-content: center;
		height: 100vh; // 使用视口高度，确保页面占满整个屏幕
		background-color: #f5f5f5; // 浅灰色背景
		padding: 20px;
		box-sizing: border-box;
		}
					
	.title {
		margin-bottom: 30px;
		text-align: center;
					  
			view {
		font-size: 40px;
		color: aquamarine;
		padding: 0 20px;
			 }
		}
					
	.content {
	  width: 100%;
	  max-width: 400px;
	}
	
	.uni-forms-item {
	  margin-bottom: 20px;
	  
	  .uni-easyinput {
	    width: 100%;
	    padding: 10px;
	    border: 1px solid #ddd;
	    border-radius: 4px;
	    box-sizing: border-box;
	    
	    // 图标样式调整（如果需要）
	    .uni-easyinput__prefix {
	      color: #999;
	    }
	  }
	}
	
	.button {
	  width: 100%;
	  max-width: 400px;
	  padding: 10px;
	  background-color: #1aad19;
	  color: white;
	  border: none;
	  border-radius: 4px;
	  font-size: 16px;
	  
	  &:active {
	    background-color: darken(#1aad19, 10%); // SCSS 函数，稍微加深颜色
	  }
	}
	
	.login-link {
	  margin-top: 30px;
	  text-align: center;
	  
	  navigator {
	    color: #1aad19;
	    text-decoration: none;
	    
	    &:hover {
	      text-decoration: underline;
	    }
	  }
	}
	</style>
					